<template>
    <view>
        <view class="search flex">
            <view class="left flexCenter" @click="onChangeListType(0)">
                <text class="text">{{ label }}</text>
                <image class="arrow" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/arrow-right.png" />
            </view>
            <view class="right flexAlignCenter">
                <image class="icon" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/search.png" />
                <input class="input" type="text" placeholder="请输入用户ID/手机号" @confirm="onConfirm" />
            </view>
        </view>
        <view class="content" v-if="data.length">
            <view class="custom-item" v-for="(item, index) in data" :key="index">
                <view class="flex">
                    <image class="avatar" :src="item.avatar" />
                    <view class="info flexColumnBetween">
                        <text class="nickname">{{ item.userName }}｜{{ item.phone }}</text>
                        <text class="number">ID：{{ item.bizUserId }}</text>
                    </view>
                </view>
                <view class="operation" @click="onChangeActive(1, index)">操作</view>
                <view class="status flex">
                    <view class="status-item flex">
                        <text class="title">未到店天数</text>
                        <text class="desc">{{ item.unStoreDays }}</text>
                    </view>
                    <view class="status-item flex bor">
                        <text class="title">状态</text>
                        <text class="desc">{{ getStatus(item.status) }}</text>
                    </view>
                    <view class="status-item flex">
                        <text class="title">所属员工</text>
                        <text class="desc">{{ item.consultant }}</text>
                    </view>
                </view>
            </view>
            <u-loadmore
                :status="status"
                loadingText="加载中"
                loadmoreText="上拉加载更多"
                nomoreText="已经到底啦～"
                fontSize="28"
                iconSize="30"
                marginTop="20"
                marginBottom="30"
            />
        </view>
        <view class="_empty" v-else>
            <image src="https://admin.ximusen.cn/profile/upload/ximusen_mini_app_img/noShiPu.png" class="image" />
            <view class="title">{{ !value ? "暂无数据" : "未搜索到相关数据" }}</view>
        </view>
        <u-action-sheet
            :actions="list1"
            :show="show1"
            round="20"
            cancelText="取消"
            @close="onClose"
            @select="onSelect"
        />
        <u-action-sheet
            :actions="list2"
            :show="show2"
            round="20"
            cancelText="取消"
            @close="onChangeShow2"
            @select="onUpdateStatus"
        />
    </view>
</template>

<script>
import { mapState } from "vuex";
import onPullDownRefresh from "../../../mixin/onPullDownRefresh";

export default {
    mixins: [onPullDownRefresh],
    data() {
        return {
            show1: false,
            show2: false,
            listType: 0,
            type: 0,
            value: "",
            list2: [
                { name: "未开始减重", value: 0 },
                { name: "减重进行中", value: 1 },
                { name: "已完成减重", value: 2 },
            ],
            active: "",
            label: "全部客户",
        };
    },
    computed: {
        ...mapState(["userInfo"]),
        list1() {
            const arr1 = [
                { name: "全部客户", value: 0 },
                { name: "我的客户", value: 1 },
            ];
            const arr2 = [
                { name: "修改状态", value: 0 },
                { name: "提醒到店", value: 1 },
                { name: "推荐食谱", value: 2 },
                { name: "体重记录", value: 3 },
                { name: "形体测评", value: 4 },
            ];
            return this.listType === 0 ? arr1 : arr2;
        },
    },
    methods: {
        onChangeActive(listType, index) {
            this.active = index;
            this.onChangeListType(listType);
        },
        onChangeListType(listType) {
            this.listType = listType;
            this.show1 = true;
        },
        onClose() {
            this.show1 = false;
        },
        async onSelect(item) {
            if (this.listType === 0) {
                this.label = item.name;
                this.type = item.value;
                this.onRefresh();
                return;
            }
            const { data, active } = this;
            const { userId, phone } = data[active];
            switch (item.value) {
                case 0:
                    this.show2 = true;
                    break;
                case 1:
                    const [, { confirm }] = await uni.showModal({ content: "是否发送提醒到店信息给到用户？" });
                    if (confirm) {
                        await this.request.httpTokenJsonRequest(
                            "/mp-api/wx/empCustom/sendRemind",
                            { userId, phone },
                            "post",
                        );
                        uni.showToast({
                            title: "发送提醒成功",
                            icon: "none",
                        });
                    }
                    break;
                case 2:
                    uni.navigateTo({
                        url: `/packageStaff/pages/recommendRecipes/index?userId=${userId}&phone=${phone}`,
                    });
                    break;
                case 3:
                    uni.navigateTo({ url: `/packageStaff/pages/weightRecord/index?userId=${userId}&phone=${phone}` });
                    break;
                case 4:
                    uni.navigateTo({ url: `/packageStaff/pages/bodyRecord/index?userId=${userId}&phone=${phone}` });
                    break;
            }
        },
        onConfirm(e) {
            this.value = e.detail.value;
            this.onRefresh();
        },
        onChangeShow2() {
            this.show2 = false;
            // this.show1 = true;
        },
        async onUpdateStatus(item) {
            const { data, active } = this;
            const { id } = data[active];
            await this.request.httpTokenJsonRequest(
                "/mp-api/wx/empCustom/updateStatus",
                { id, status: item.value },
                "post",
            );
            this.onRefresh();
            uni.showToast({
                title: "客户状态修改成功",
                icon: "none",
            });
        },
        getStatus(status) {
            return this.list2.find((item) => item.value === status).name;
        },
        async onRequest() {
            const { type, value, pageNum, pageSize } = this;
            return await this.request.httpTokenJsonRequest(
                "/mp-api/wx/empCustom/list",
                { type, value, pageNum, pageSize },
                "get",
            );
        },
    },
    onLoad() {
        this.onRefresh();
    },
};
</script>

<style lang="less" scoped>
@import url("./index.less");
view.data-v-72836044,
scroll-view.data-v-72836044,
swiper-item.data-v-72836044 {
    height: 10px !important;
}
</style>
